<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>基础模块</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="<?php echo base_url('public/styles/bootstrap/css/bootstrap.min.css'); ?>" />
	<script src="<?php echo base_url('public/scripts/jquery-3.2.1.min.js'); ?>"></script>
	<script src="<?php echo base_url('public/scripts/reconnecting-websocket.min.js'); ?>"></script>
</head>
<body>
<div class="jumbotron">
	<div class="container">
		<h1>扫码登录</h1>
		<p>是否确认登录？</p>
		<p><input type="text" class="form-control" name="name" placeholder="请输入您的昵称"/></p>
		<p id="login"><a class="btn btn-primary btn-lg" role="button">确认</a></p>
	</div>
</div>
<style>
	.reloading{position: fixed;top:0;left:0;width:100%;height:100%;text-align: center}
	.reloading span{display:block;position:absolute;color:#fff;font-size:16px;width:100%;top:20px}
	.reloading:before{content:'';display:block;position:absolute;width:100%;height:100%;background: rgba(0,0,0,.6)}
</style>
<script>
	$(document).ready(function(){
		if( typeof(WebSocket) != "function" ) {
			$('body').html("<div id='container'><h1>发生错误</h1><p style='margin: 12px 15px 12px 15px;'>您的浏览器不支持 HTML5 Web Sockets，请尝试更换或升级</p></div>");
		}else{
			var websocket = new ReconnectingWebSocket('<?php echo config_item('websocket_server'); ?>', null, {debug: true, reconnectInterval: 3000});
			websocket.onopen = function (evt) {
				console.log("Connected to WebSocket server.");
				websocket.send('<?php echo $shake_hands; ?>');
			};
			websocket.onmessage = function (evt) {
				$(".reloading").remove();
				console.log('server: ' + evt.data);
				if(evt.data){
					var data = JSON.parse(evt.data);
					if(data.status != 0){
						$("#login").html('失败！状态码：'+ data.status);
					}else{
						switch(data.method){
							case 'shake_hands':
								ajax_post(data,function(result){
									if(result.error){
										$("#login").html(result.msg);
										console.log('shake hands error');
										console.log(data);
									}else{
										//握手验证成功，给服务器发送回执并等待提交登陆申请
										console.log('shake hands success! waiting for confirmation');
										websocket.send('<?php echo $scan; ?>');
									}
								},'json');
								break;
							case 'scan':
								console.log('page show is down!');
								ajax_post(data,function(result){},'json');
								break;
							case 'login':
								ajax_post(data,function(result){
									if(result.error){
										alert(result.msg);
										$("#login").html('sweep login error');
										console.log(data);
									}else{
										$("#login").html("<span style='color:green'>登录已确认</span>");
										console.log('sweep login success!');
									}
								},'json');
								break;
							default:
								$("#login").html('return data error!');
								console.log(data);
						}
					}
					//console.log('server: ' + evt.data);
				}
			};
			websocket.onerror = function (evt, e) {
				alert('websocket 服务器错误，请使用 console 工具进行调试');
				console.log(evt);
			};
			websocket.onclose = function (evt) {
				$("body").append('<div class="reloading"><span>正在重连</span></div>');
			};
			$("a.btn").on("click",function(){
				var nickname = $("input[name='name']").val();
				if(nickname == ''){
					alert('请输入您的昵称');
				}else{
					ajax_post({method:'login',nickname:nickname},function(result){
						if(result.error){
							$("#login").html(result.msg);
							console.log('login error');
							console.log(data);
						}else{
							console.log(result.msg.toString());
							websocket.send(result.msg.toString());
							$("#login").html("<span style='color:brown'>提交中 ...</span>");
							console.log('sign in request ...');
						}
					},'json');
				}
			});
		}
	});
	function ajax_post(data,success,type = 'text'){
		$.ajax({
			type: 'POST',
			url: '' ,
			data: data ,
			timeout: 5000,
			success: success,
			error: function(XMLHttpRequest,status,error){
				alert('数据返回有误！请刷新页面后重试');
			},
			complete : function(XMLHttpRequest,status){
				if(status == 'timeout'){
					ajax.abort();
					alert('操作超时！请重试');
				}
			},
			dataType: type
		});
	}
</script>
</body>
</html>